<template>
  <f7-toolbar position="bottom" class="messagebar"
              style="position: fixed;">
    <div class="messagebar-area">
        <textarea class="resizable"
                  style="padding-left:16px;padding-right:16px; max-height: 70px;"
                  :placeholder="(toUser!='') ? '@'+toUser : '评论'"
                  @click="clickInputFun"
                  v-model.trim="sendContent">
        </textarea>
    </div>
    <div style="padding-right: 16px;align-self: flex-end;margin-bottom: 4px;">
      <f7-button
          fill :color="themeColor"
          v-bind:class="{ 'disabled': !(sendContent.length!=0) }"
          @click="submitContent">发送
      </f7-button>
    </div>
  </f7-toolbar>
</template>

<script>
  import Storage from '../../mod/storage';

  export default {
    props: ['toUser', 'content'],
    data() {
      return {
        themeColor: 'blue',
        sendContent: '',
      };
    },
    watch: {
      content() {
        let _this = this;
        _this.sendContent = _this.content;
      },
    },
    created() {
      let _this = this;
      var from = _this.$f7.data.from;
      if (from == 'dingding') {
        _this.themeColor = '#2CAFFF';
      } else {
        _this.themeColor = '#08BE62';
      }
    },
    mounted() {
      let _this = this;
    },
    methods: {
      submitContent() {
        let _this = this;
        this.$emit('sendContent', _this.sendContent);
      },
      clickInputFun: function () {
        let _this = this;
        this.$emit('clickInput', {});
      },
    },
  }
</script>

<style scoped>

</style>